<template lang="pug">
.cp-inventory-serial-popup
  el-dialog.serial-popup(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="560px")
    p.height32 所需序列号{{formData.quantity || 0}}个
    el-form.serial-popup-form(:model="formData", :inline="true", ref="formData", label-width="64px")
      p.height40
        span
          el-radio(:disabled="!isEdit", v-model="formData.type", label="0") 批量输入
        span.ml 固定字段:
        el-input(v-model="formData.fixedString", placeholder="请输入固定字段", :disabled="!isEdit")
      el-row(:gutter="20")
        el-col(:span="12")
          el-form-item(label="起始号")
            el-input(v-model="formData.start", placeholder="请输入流水号", :disabled="!isEdit")
        el-col(:span="12")
          el-form-item(label="终止号")
            el-input(v-model="formData.end", placeholder="请输入流水号", :disabled="!isEdit")
      el-row.min-height(:gutter="20")
        el-col(:span="12")
          el-form-item(label="排除号")
            el-input(type="textarea", v-model="formData.exclude", placeholder="每行1个序列号", :rows="5", :disabled="!isEdit")
        el-col(:span="12")
          span 共{{batchNumber}}个
      p.height32
        el-radio(:disabled="!isEdit", v-model="formData.type", label="1") 单个输入
      el-row.min-height(:gutter="20")
        el-col(:span="12")
          el-form-item(label="序列号")
            el-input(type="textarea", v-model="formData.serialNo", placeholder="每行1个序列号", :rows="5", :disabled="!isEdit")
        el-col(:span="12")
          span 共{{aloneNumber}}个
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveData", v-if="isEdit") 保存
</template>

<script>
export default {
  name: 'inventoryserialpopup',
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    parentData: Object
  },
  data() {
    return {
      formData: {}
    };
  },
  computed: {
    batchNumber() {
      if (this.formData.exclude) {
        return this.formData.exclude.split('\n').length;
      } else {
        return 0;
      }
    },
    aloneNumber() {
      if (this.formData.serialNo) {
        return this.formData.serialNo.split('\n').length;
      } else {
        return 0;
      }
    }
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
        // 初始化单选框
        if (newData.type === '1') {
          this.$set(this.formData, 'type', '1');
        } else {
          this.$set(this.formData, 'type', '0');
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    // 关闭、取消
    closeDialog() {
      this.$emit('close');
    },
    // 保存
    saveData() {
      if (this.formData.type === '0') {
        // 批量输入
        let data = [];
        // 固定字段
        const str = this.formData.fixedString;
        // 开始
        const start = Number(this.formData.start);
        // 结束
        let end = Number(this.formData.end);
        if (isNaN(start) || isNaN(end)) {
          this.$message.info('起始号、终止号请输入数字');
          return;
        }
        // 生成序列号
        while (start <= end) {
          data = [`${str}${end}`, ...data];
          end -= 1;
        }
        // 去掉排除
        let excludeArr = [];
        if (this.formData.exclude) {
          excludeArr = this.formData.exclude.split('\n');
          data = data.filter((item) => {
            if (excludeArr.find(ele => ele == item)) {
              return false;
            }
            return true;
          });
        }
        if (data.length != this.formData.quantity) {
          this.$message.error('输入数量与所需数量不一致');
          return;
        }
        this.$emit('submit', data);
        this.closeDialog();
      } else {
        // 单个输入
        if (this.formData.serialNo) {
          const data = this.formData.serialNo.split('\n');
          if (data.length != this.formData.quantity) {
            this.$message.error('输入数量与所需数量不一致');
            return;
          }
          this.$emit('submit', data);
          this.closeDialog();
        } else {
          this.$message.info('请输入序列号');
        }
      }
    }
  },
};
</script>

<style lang="sass">
$HEIGHT: 40px
$BORDERCOLOR: #dcdfe6
.cp-inventory-serial-popup
  .serial-popup
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 16px
    .el-dialog__footer
      padding-top: 0
      text-align: center
      .el-button
        width: 80px
  .serial-popup-form
    .el-form-item
      width: 100%
      height: 34px
      margin-right: 0
    .el-form-item__label
      text-align: left
    .el-form-item__content
      min-width: 120px
      width: calc(100% - 64px)
    .el-select, .el-date-editor.el-input
      width: 100%
  .height32
    height: 32px
    line-height: 32px
  .ml
    margin-left: 16px
  .height40
    height: 40px
    line-height: 40px
    margin-bottom: 10px
    .el-input
      width: auto
      margin-left: 16px
  .min-height
    min-height: 112px
</style>
